<!--
 * @Date: 2025-02-22 10:50:01
 * @LastEditors: Lcx l1556461835@163.com
 * @LastEditTime: 2025-02-24 14:52:16
 * @FilePath: \fushun-gitee\components\Waiwei.vue
 * @Description: 
-->
<template>
  <el-form ref="ruleForm" :model="checkInfo" :rules="rules" label-width="140px" style="max-width: 600px;margin: 0 auto;">
    <table class="uTable" style="">
      <tbody>
        <tr>
          <td style="width: 150px">外委厂商</td>
          <td>
            <el-select v-model="checkInfo.outsourcingName" :disabled="disable" filterable clearable allow-create
              default-first-option placeholder="请选择外委厂商" @change="handleChange">
                <el-option v-for="(item,index) in selectOptions" :key="index" :label="item.outsourcingName" :value="item.outsourcingName"/>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>外委厂商联系方式</td>
          <td>
            <el-input :disabled="disable" v-model.number.trim="checkInfo.outsourcingPhone" placeholder="请输入外委厂商联系方式"></el-input>
          </td>
        </tr>
        <tr>
          <td>预计外委价格</td>
          <td>
            <el-input :disabled="disable" v-model.number="checkInfo.outsourcingPrice" placeholder="请输入价格金额" style="width:52%"></el-input>
            <span style="margin-left: 20px">(人民币：万元)</span>
          </td>
        </tr>
      </tbody>
    </table>
  </el-form>

</template>

<script>
import { GET_OUT_SOURCING } from "@/lib/Api.js";
import { post } from "@/lib/Util.js";
export default {
  props: {
    formInfo: {
      type: Object,
      default: () => {
        return {
          outsourcingName: "",
          outsourcingPhone: "",
          outsourcingPrice: "",
          outsourcingId: "", // 外资厂商id
          contractInfoId: "" // 待评审订单id
        };
      }
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkInfo: {
        outsourcingName: "",
        outsourcingPhone: "",
        outsourcingPrice: "",
        outsourcingId: "", // 外资厂商id
        contractInfoId: "" // 待评审订单id
      },
      rules: {},
      selectOptions: []
    };
  },
  watch: {
    formInfo: {
      handler(newVal) {
        // this.checkInfo = Object.assign(this.checkInfo, newVal);
        this.checkInfo = Object.keys(this.checkInfo).reduce((acc, key) => {
          if (newVal.hasOwnProperty(key)) {
            acc[key] = newVal[key];
          } else {
            acc[key] = this.checkInfo[key];
          }
          return acc;
        }, {});
      },
      deep: true
    }
  },
  mounted() {
    this.getOutSoucring(); // 获取外委
    this.checkInfo = Object.keys(this.checkInfo).reduce((acc, key) => {
      if (this.formInfo.hasOwnProperty(key)) {
        acc[key] = this.formInfo[key];
      } else {
        acc[key] = this.checkInfo[key];
      }
      return acc;
    }, {});
  },
  methods: {
    async getOutSoucring() {
      let res = await post(GET_OUT_SOURCING, {
        outsourcingName: "",
        outsourcingPhone: ""
      });
      this.selectOptions = res.data;
    },
    handleChange(val) {
      if (val) {
        let obj = this.selectOptions.find(item => {
          return item.outsourcingName == val;
        });
        if (obj) {
          this.checkInfo.outsourcingPhone = obj.outsourcingPhone;
          this.checkInfo.outsourcingId = obj.id;
        } else {
          this.checkInfo.outsourcingPhone = "";
          this.checkInfo.outsourcingId = "";
        }
      } else {
        this.checkInfo.outsourcingPhone = "";
        this.checkInfo.outsourcingId = "";
      }
    },
    // 给到外部组件的值
    getData() {
      return this.checkInfo;
    }
  }
};
</script>

<style>
</style>
